<template>
  <div class="chart" :id="'chartId'"></div>
</template>
<script setup>
import * as echarts from "echarts";

const myChart = ref(null);
const chartInit = () => {
  // 基于准备好的dom，初始化echarts实例
  myChart.value = echarts.init(document.getElementById("chartId"));
  // 配置项
  var option = {
    graphic: {
        elements: [
            {
                type: 'group',
                left: 'center',
                top: 'center',
                children: [
                    {
                        type: 'arc',
                        shape: {
                            cx: 0,
                            cy: 0,
                            r: 80,
                            startAngle: Math.PI * 1.5,
                            endAngle: Math.PI * (1.5 + 2 * 0.649) // 控制进度
                        },
                        style: {
                            stroke: '#00c0ff',
                            lineWidth: 10,
                            shadowBlur: 10,
                            shadowColor: '#00c0ff'
                        }
                    },
                    {
                        type: 'circle',
                        shape: {
                            cx: 0,
                            cy: 0,
                            r: 80
                        },
                        style: {
                            fill: 'rgba(0, 192, 255, 0.2)'
                        }
                    },
                    {
                        type: 'text',
                        style: {
                            text: '64.9%',
                            font: 'bold 30px sans-serif',
                            fill: '#fff',
                            textAlign: 'center',
                            textVerticalAlign: 'middle'
                        }
                    }
                ]
            }
        ]
    }
};
  // 使用刚指定的配置项和数据显示图表。
  myChart.value.setOption(option);
};

// Lifecycle hook
onMounted(() => {
  chartInit();
});
</script>
<style>
.chart {
  width: 100%;
  height: 100%;
}
</style>
